<template>
	<div>
		<ma-body>
			<ma-refresh slot="content" :safeBottom="true" v-if="productInfo" :refresh="false">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
				<div class="detailImg-box">
					<image src="../../../static/img/detailBg.png" mode="aspectFill"
						style="width: 100vw;height: 112.5vw;position: absolute;z-index: 1;"></image>
					<div class="bird">
						<image src="../../../static/img/detailBorder.png" mode="aspectFill"
							style="width: 82.93vw;height: 82.93vw;position: absolute;z-index: 3;top: 8.53vw;left: 8.53vw;">
						</image>
						<image :src="productInfo.info.cover" mode="aspectFill"
							style="position: absolute;z-index: 2;width: 78.67vw;height: 78.67vw;top: 10vw;left: 10vw;border-radius: 6.4vw;">
						</image>
						<image src="../../../static/img/lookBig.png" mode="aspectFill"
							style="width: 6.4vw;height: 6.4vw;position: absolute;top: 12.8vw;right: 12.8vw;z-index: 6;"
							@tap.stop="lookBig(productInfo.info.cover)"></image>
					</div>
				</div>
				<div class="radius-box">
					<image src="../../../static/img/enter16.png" mode="aspectFill" class="enter-img" style=""></image>
				</div>
				<div class="text-box">
					<div
						style="display: flex;justify-content: space-between;padding-right: 5.33vw;align-items: center;">
						<span class="num-box" v-if="detailType == 'my'">
							<image src="@/static/img/num.png" mode="aspectFill" class="num-img"></image>
							<label
								class="num-text">{{ collectionInfo.collection.nftItemIdV }}/{{ productInfo.info.nftMaxSupply }}</label>
						</span>
						<span class="xianliang-box" v-else>
							<image src="../../../static/img/indexTitle.png" mode="aspectFill" class="xianliang-img">
							</image>
							<label class="xianliang-text">{{ productInfo.info.nftMaxSupply }}份</label>
						</span>
						<block
							v-if="productInfo.priorityAggrs.length > 0 && productInfo.limitTime.info.status != 'ing' && userPriority && detailType != 'my'">
							<div class="center"
								v-if="detailType == 'firstShop' ||  productInfo.priorityAggrs[0].userPriority.useStatus == 'unused'">
								<span
									style="font-size: 3.2vw;font-weight: 300;color: #A972FF;margin-right: 1.07vw;">优先购</span>
								<block v-if="userPriority.useStatus == 'unused'">
									<u-count-down :timestamp="firstShopTime(firstShopDetail)" bg-color="#1b1b1bd"
										color="#FFCE80" separator-color="#FFCE80" font-size="24" separator-size="24"
										:show-days="false">
									</u-count-down>
								</block>
							</div>
						</block>
					</div>
					<span class="text-title">
						{{ productInfo.info.spuTitle }}
					</span>
					<div style="padding-right: 5.33vw;">
						<block v-if="productInfo.info.tags">
							<span class="border-box"
								v-for="item1 in productInfo.info.tags.split(',')">{{ item1 }}</span>
						</block>
					</div>
					<span class="desc">
						{{ productInfo.info.desc }}
					</span>

					<div class="money-box">

						<div class="left-money" v-if="detailType != 'my'">
							<span class="price">
								<label
									style="font-size: 4.27vw;">￥</label>{{ productInfo.info.spuPrice / 100 | moneyFilter }}
							</span>
							<span class="line-price">
								￥{{ productInfo.info.spuOriginPrice / 100 | moneyFilter }}
							</span>
						</div>
						<block v-if="detailType != 'my' && productInfo.limitTime && detailType != 'firstShop'">
							<block v-if="productInfo.limitTime.info.status == 'ing'">
								<div class="right-money">
									<span style="display: flex;align-items: center;justify-content: flex-end;">
										<image src="../../../static/img/detailEnter.png" mode="heightFix"
											style="height: 3.2vw;"></image>
										<label
											style="font-size: 3.2vw;font-weight: 300;color: #A972FF;padding-left: 1.07vw;display: block;">火热抢购中</label>
									</span>
									<!-- <u-count-down :timestamp="timestamp(productInfo.limitTime.info)" bg-color="#1b1b1bd" color="#FFCE80"
										separator-color="#FFCE80" font-size="24" separator-size="24" :show-days="false">
									</u-count-down> -->
								</div>
							</block>
							<block v-else-if="productInfo.limitTime.info.status == 'waiting'">
								<div class="right-money">
									<span style="display: flex;align-items: center;justify-content: flex-end;">
										<image src="../../../static/img/detailEnter.png" mode="heightFix"
											style="height: 3.2vw;"></image>
										<label
											style="font-size: 3.2vw;font-weight: 300;color: #A972FF;padding-left: 1.07vw;display: block;">即将开售</label>
									</span>
									<u-count-down :timestamp="timestamp(productInfo.limitTime.info)" bg-color="#1b1b1bd"
										color="#FFCE80" separator-color="#FFCE80" font-size="24" separator-size="24"
										:show-days="false">
									</u-count-down>
								</div>
							</block>
						</block>

					</div>
					<block v-if="detailType == 'my'">
						<!-- 持有者 -->
						<div class="creator-box">
							<div class="creator-left">
								<image :src="collectionInfo.user.avatar" mode="aspectFill" class="cerator-img"></image>
								<div class="creator-text">
									<span class="jiu-font28-fff center">
										{{ collectionInfo.user.nickname }}
										<label class="creator-border"
											style="color: #FFCE80;border: 1px solid #FFCE80;">持有者</label>
									</span>
									<span class="jiu-font24-555"
										style="margin-top: 0.27vw;">ID：{{ collectionInfo.user.uuid }}</span>
								</div>
							</div>
							<image src="../../../static/img/enter16.png" mode="aspectFill" class="image427"></image>
						</div>
						<div class="creator-box" style="margin-top: 2.67vw;">
							<div class="creator-left">
								<image :src="collectionInfo.creator.avatar" mode="aspectFill" class="cerator-img">
								</image>
								<div class="creator-text">
									<span class="jiu-font28-fff center">
										{{ collectionInfo.creator.name }}
										<label class="creator-border">创作者</label>
									</span>
									<span class="jiu-font24-555"
										style="margin-top: 0.27vw;">ID：{{ collectionInfo.creator.id }}</span>
								</div>
							</div>
							<image src="../../../static/img/enter16.png" mode="aspectFill" class="image427" @tap="toPersonHome"></image>
						</div>
					</block>
					<!-- 创作者 -->
					<block v-else>
						<div class="creator-box"  @tap="toPersonHome">
							<div class="creator-left">
								<image :src="productInfo.creator.avatar" mode="aspectFill" class="cerator-img"></image>
								<div class="creator-text">
									<span class="jiu-font28-fff center">
										{{ productInfo.creator.name }}
										<label class="creator-border">创作者</label>
									</span>
									<span class="jiu-font24-555"
										style="margin-top: 0.27vw;">ID：{{ productInfo.creator.id }}</span>
								</div>
							</div>
							<image src="../../../static/img/enter16.png" mode="aspectFill" class="image427"></image>
						</div>
					</block>
				</div>
				<block v-if="detailType == 'my'">
					<!-- 认证信息 -->
					<div class="auth-box">
						<span class="auth-title">认证信息</span>
						<span class="between">
							<label class="jiu-font24-555"
								style="width: 59.47vw;overflow: hidden;text-overflow: ellipsis;">交易哈希：{{ collectionInfo.collection.nftTxHash }}</label>
							<image src="../../../static/img/fuzhi.png" mode="aspectFill" class="image427"
								@tap="fuzhi(collectionInfo.collection.nftTxHash)"></image>
						</span>
						<span class="between" style="margin-top: 1.07vw;">
							<label
								class="jiu-font24-555">合约地址：{{ collectionInfo.collection.nftContractAddress }}</label>
							<image src="@/static/img/fuzhi.png" mode="aspectFill" class="image427"
								@tap="fuzhi(collectionInfo.collection.nftContractAddress)"></image>
						</span>
					</div>
					<!-- 交易记录 -->
					<!-- <div class="deal-box">
						<div class="between">
							<span class="deal-title">交易记录</span>
							<image src="../../../static/img/enter16.png" mode="aspectFill" class="image427"></image>
						</div>
						<div class="between">
							<div class="deal-info">
								<image src="../../../static/img/swiper.jpg" mode="aspectFill" class="deal-img"></image>
								<div class="info">
									<span class="deal-title" style="margin-bottom: 0.27vw;">莱姆LAIMU</span>
									<span class="jiu-font24-555" >买入/获赠</span>
								</div>
							</div>
							<div class="info">
								<span style="font-size: 3.73vw;font-weight: 500;color: #A972FF;">
									<label style="font-weight: 2.67vw;">￥</label>
									29.00
								</span>
								<span class="jiu-font24-555">2022/6/18</span>
							</div>
						</div>
					</div> -->
				</block>
				<block v-if="productInfo.gifts.length > 0">
					<div class="jiu-font24-555" style="text-align: center;margin: 2.67vw 0;">·· 附属权益 ··</div>

					<div class="collection-list">
						<div class="collection-item" v-for="item in productInfo.gifts">
							<div class="collection-border" style="background-color: #000;position: relative;">
								<div class="collection-num jiu-font10-a97">×{{item.count}}</div>
								<block>
									<image :src="item.cover" mode="aspectFill" class="collection-img"></image>
								</block>
							</div>
							<span class="jiu-font24-fff">{{ item.title }}</span>
						</div>
					</div>
				</block>
				<!-- 藏品介绍 -->
				<div style="margin: 2.13vw 0;text-align: center;">
					<span class="jiu-font24-555">
						<label style="margin-right: 0.27vw;">·</label><label style="margin-right: 1.07vw;">·</label>
						藏品介绍
						<label style="margin-left: 1.07vw;">·</label><label style="margin-left: 0.27vw;">·</label>
					</span>
				</div>

				<div class="imgList" v-html="productInfo.info.detail"></div>

				<div class="bottomText-box">
					<span class="bottomText-title">关于数字藏品</span>
					<span
						class="bottomText-text">数字藏品是指使用区块链技术，对应特定的作品、艺术品生成的唯一数字凭证，在保护其数字版权的基础上，实现真实可信的数字化发行、购买、收藏和使用。本平台的数字藏品是基于[元创链]技术协议发行的数字商品，每件藏品在[元创链]都有链上唯一标识，限量发行、不可篡改、不可复制。</span>
					<span class="bottomText-title">购买须知</span>
					<span
						class="bottomText-text">数字藏品为虚拟数字商品，并非实物，仅限经实名认证且年满18周岁的中国大陆用户购买。数字藏品的版权归发行方和原创者所有，除另外获得版权拥有者的书面同意外，用户不得将数字藏品用于任何商业用途。</span>
					<span
						class="bottomText-text">请您于10分钟内完成数字藏品支付，本商品一经出售，不支持退换。请勿对数字藏品进行炒作、场外交易、欺诈、或以任何其他非法行为进行使用。</span>
				</div>

				<block v-if="user.access_token">
					<div class="real-name" @tap="toRealName" v-if="user.myInfo.user.isReal == 0 ">
						<span class="jiu-font24-555 center" style="color: #ff9e3e;">
							<image src="../../../static/img/zhuyi.png" mode="aspectFill" class="real-img"
								style="margin-right: 1.07vw;"></image>
							购买数字藏品前需完成实名认证
						</span>
						<span class="jiu-font24-555 center" style="color: #ff9e3e;">
							前往认证
							<image src="../../../static/img/enterDetailTwo.png" mode="aspectFill" class="real-img">
							</image>
						</span>
					</div>
				</block>

			</ma-refresh>
			<bottom-box slot="footer" v-if="user.access_token">
				<div
					style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding-left: 1.33vw;width: 100%;">
					<span style="display: flex;flex-direction: column;text-align: center;align-items: center;"
						@tap="onShare">
						<image src="../../../static/img/share.png" mode="aspectFill"
							style="width: 6.4vw;height: 6.4vw;"></image>
						<label style="font-size: 2.67vw;font-weight: 300;color: #aaaaaa;">分享</label>
					</span>
					<!-- 当查看我的藏品时,detailType为my,展示转赠按钮 -->
					<block v-if="detailType == 'my'">
						<!-- <span class="buy-btn unplayed">1321564{{ detailType }}</span> -->
						<span class="buy-btn" @tap="zeng"
							v-if="collectionInfo.spu.isGiving == 1 && time(collectionInfo) < 0 ">无偿转赠给好友</span>
						<span class="buy-btn" style="background: #555555;color: #000;box-shadow: none;"
							v-else-if="collectionInfo.spu.isGiving == 1 &&  time(collectionInfo) > 0">
							<span style="margin-right: 1.07vw;">剩余冷却时间</span>
							<u-count-down :timestamp="time(collectionInfo)" bg-color="#1b1b1bd" color="#FFCE80"
								separator-color="#FFCE80" font-size="24" separator-size="24" :show-days="true"
								separator="zh"></u-count-down>
						</span>
						<span class="buy-btn" style="background: #555555;color: #000;box-shadow: none;"
							v-else-if="collectionInfo.spu.isGiving == 0">禁止转赠</span>
					</block>
					
					<!-- 如果limitTime为空,显示等待开售 -->
					<block v-else-if="!productInfo.limitTime">
						<span class="ready-btn" style="line-height: 12.8vw;padding: 0;">
							<label style="font-weight: 500;">等待开售</label>
						</span>
					</block>
					
					<!-- 如果有限时促销 -->
					<block v-else-if="!userPriority || (!userPriority && productInfo.limitTime) || userPriority.useStatus == 'over'">
						<!-- 当限时促销状态为ing与库存不为0的时候,显示立即购买 -->
						<span class="buy-btn" @tap="buyModal"
							v-if="productInfo.limitTime.info.status == 'ing' && productInfo.info.stock != 0">立即购买￥{{ productInfo.info.spuPrice / 100 | moneyFilter }}</span>
							<!-- 当促销状态为waiting时,显示即将开售 -->
						<span v-else-if="productInfo.limitTime.info.status == 'waiting'" class="ready-btn">
							<label style="font-weight: 500;">即将开售</label>
							<label>{{ productInfo.limitTime.info.startTime | timeFilterIn }}</label>
						</span>
						<!-- 当该商品的库存小于等于0或者促销状态为done时,显示已售罄 -->
						<span v-else-if="productInfo.info.stock <= 0  || productInfo.limitTime.info.status == 'done'"
							class="ready-btn" style="line-height: 12.8vw;padding: 0;">
							<label style="font-weight: 500;">已售罄</label>
						</span>
					</block>
					
					<!-- 如果detailType不等于my跟userPriority有内容时,则为优先购 -->
					<block v-else-if="productInfo.priorityAggrs.length != 0 || userPriority ">
						<!-- 如果优先购状态为unplayed代表优先购未开始, unused为已开始, used为已使用 -->
						<span v-if="userPriority.useStatus == 'unplayed'"
							class="buy-btn unplayed">优先购即将开始{{ firstShopDetail.startTime | timeFilterIn }}</span>
						<span class="buy-btn" @tap="buyModal"
							v-else-if="userPriority.useStatus == 'unused'">立即购买￥{{ productInfo.info.spuPrice / 100 | moneyFilter }}</span>
						<span v-else-if="userPriority.useStatus == 'used'" class="buy-btn unplayed">已使用</span>
					</block>
					
					
					


					<!-- && <span v-if="detailType == 'firstShop' && userPriority.useStatus == 'unplayed'" class="buy-btn unplayed" @tap="buyModal">即将开始{{ firstShopDetail.startTime | timeFilterIn }}</span> -->
				</div>
			</bottom-box>
		</ma-body>

		<!-- <ma-poster-modal ref="posterModal"></ma-poster-modal> -->
		<!-- 当登陆了之后,才可使用该组件 -->
		<block v-if="user.access_token">
			<product-poster :isCollection="detailType == 'my' ? true : false" :info="productInfo" ref="productPoster"
				:spuId="spuId" :collectionInfo="collectionInfo"></product-poster>
		</block>
		<!-- 确认购买弹窗 -->
		<u-modal v-model="cancelModal" :content="content" @confirm="buy" :show-cancel-button="true"></u-modal>
		<!-- 购买成功后的弹窗 -->
		<product-modal ref="productModal"></product-modal>
		<!-- loading加载框 -->
		<loadingModal ref="loadingModal" @loadingBack="loadingBack"></loadingModal>
	</div>
</template>

<script>
	import productModal from '@/subPackA/components/product-modal/product-modal';
	import loadingModal from '@/components/loading-modal/loading-modal';
	export default {
		components: {
			productModal,
			loadingModal
		},
		data() {
			return {
				productInfo: {},
				payShow: false,
				spuId: null,
				detailType: 0,
				collectionInfo: {},
				cancelModal: false,
				content: '确定购买该数字藏品吗？',
				// 优先购
				firstShopDetail: {},
				userPriority: null,
				orderId: '',
				timer: null
			}
		},
		methods: {
			toPersonHome(){
				this.$ma.route.personHome({
					id: this.productInfo.creator.id,
					homeType: 'creator'
				})
			},
			loadingBack(){
				this.clearTime();
			},
			//销毁定时器
			clearTimer() {
				if (this.timer) clearInterval(this.timer);
			},
			// 下拉刷新
			async onPullDownRefresh() {
				this.getProductDetail(this.spuId)

				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 800);
			},
			// 返回上一页
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 点击跳转实名验证
			toRealName() {
				this.$ma.route.realName();
			},
			// 弹窗确认按钮事件
			async buy() {
				// 如未实名验证，弹出实名验证
				if (this.user.myInfo.user.isReal == 0) return uni.showToast({
					icon: 'none',
					title: '请先完成实名认证'
				});
				
				
				// 请求秒杀接口所需要的数据
				let data = {
					cartList: [{
						count: 1,
						skuId: this.productInfo.skuList[0].skuId
						// skuId: 514
					}],
					// orderType: 'draw_lots',
				};

				if (this.productInfo.limitTime.info.status == 'ing') data['orderType'] = 'limit_time';
				else if (this.userPriority.useStatus == 'unused') data['orderType'] = 'priority';

				if (this.productInfo.limitTime.info.limitTimeId) data['moduleId'] = this.productInfo.limitTime.info
					.limitTimeId;
					
				if(this.userPriority){
					if (this.productInfo.priorityAggrs.length > 0) data["priorityId"] = this.userPriority.id;
				}
				
				// 调用秒杀接口
				this.$u.api.onOrderSeckill(data).then(res => {
					let data = {
						orderToken: res.orderToken,
						totalPrice: this.productInfo.skuList[0].skuPrice,
					};
					
					// this.$u.api.onOrderSubmit(data).then(res => {
					let id = res.orderToken;
					this.orderId = res.orderToken;
					let skuId = this.productInfo.skuList[0].skuId;
					
					// 九歌专属订单支付接口 0为0元购，1为花钱购买藏品
					this.$u.api.onPay({}, id, skuId).then(res => {
						if (res.data == 0) {
							uni.showToast({
								icon: 'none',
								title: '购买成功'
							})
							let obj = this.productInfo;
							this.getProductDetail(this.spuId);
							setTimeout(() => {
								this.$refs.productModal.open({
									obj,
									success: () => {
										let id;
										if (this.productInfo.info.type ==
											'collection') id = 0;
										else id = 1;
										uni.showToast({
											icon: 'none',
											title: '跳转中，请稍后'
										})
										setTimeout(() => {
											this.$ma.route.myCollection({
												currentIndex: id
											})
										}, 4000)
									}
								});
							}, 1000)
						} else if (res == 1) {
							// 调用订单查询接口
							this.getOrderGen();

						}
					}).catch(err => {
						// 如报错调用订单查询接口
						this.getOrderGen();
					})
				}).catch(err => {
					// 如报错调用订单查询接口
					if(err.bcode == 'ORDER_0005' || err.bcode == 'ORDER_0001'){
							this.$refs.loadingModal.open({
								msg: err.msg,
								type: 'loading'
							});
					}else if(err.bcode == 'ORDER_0007'){
						this.$refs.loadingModal.open({
							msg: err.msg,
							type: 'tips'
						})
					}else{
							this.$refs.loadingModal.open({
								msg: err.msg,
								type: 'tips'
							});
					}
				})

			},
			// 调用订单查询事件
			getOrderGen() {
				// 调用订单查询接口
				this.$u.api.getOrderGen().then(res => {
					console.log('成功了')
					// 如调用成功关闭加载框，跳转订单确认页
					this.$refs.loadingModal.close();

					let productInfo = {
						cover: this.productInfo.info.cover,
						spuTitle: this.productInfo.info.spuTitle,
						spuPrice: this.productInfo.info.spuPrice,
						type: this.productInfo.info.type,
						tags: this.productInfo.info.tags,
						spuId: this.productInfo.info.spuId
					}
					if(this.userPriority){
						if (this.userPriority.useStatus == 'unused') productInfo["priorityId"] = this.userPriority.id;
					}
					this.$ma.route.buyDetail({
						productInfo: JSON.stringify(productInfo),
						orderId: this.orderId,
					})

				}).catch(err => {
					// 报错弹出对应信息的弹框
					if (err.bcode == 'ORDER_0005') {
						this.$refs.loadingModal.open({
							msg: '您已成功抢到商品，正在创建订单，请稍后…',
							type: 'loading'
						});
						// 如订单查询还未返回null，十秒后继续调用该事件
						this.timer =  setInterval(() => {
							this.getOrderGen();
						}, 10000)
					} else if (err.bcode == 'ORDER_0001') {
						this.$refs.loadingModal.open({
							msg: err.msg,
							type: 'loading'
						});
						// 如订单查询还未返回null，十秒后继续调用该事件
						// this.timer =  setInterval(() => {
						// 	this.getOrderGen();
						// }, 10000)
						setTimeout(()=>{
							this.getOrderGen();
						},10000)
					} else if (err.bcode == 'ORDER_0002') {
						this.$refs.loadingModal.open({
							msg: err.msg,
							type: 'tips'
						});
					}else{
						this.$refs.loadingModal.open({
							msg: err.msg,
							type: 'loading'
						});
					}
					// 如订单查询还未返回null，十秒后继续调用该事件
					// this.timer =  setInterval(() => {
					// 	this.getOrderGen();
					// }, 10000)
				})
			},
			// 点击购买按钮
			buyModal() {
				if (this.user.myInfo.user.isReal == 0) {
					uni.showToast({
						icon: 'none',
						title: '请先完成实名认证'
					});
					setTimeout(() => {
						this.$ma.route.realName();
					}, 1500)
					return;
				}
				this.cancelModal = true;
			},
			// 查看大图
			lookBig(image) {
				uni.previewImage({
					urls: [image]
				})
			},
			// 分享按钮
			onShare() {
				this.$refs.productPoster.open();
			},
			// 获取商品详情
			async getProductDetail(id) {
				let res = await this.$u.api.getProductDetail({}, id);
				this.productInfo = res;
				
				if (res.priorityAggrs.length != 0) {
					if(this.userPriority != null){
						res.priorityAggrs.forEach(e=>{
							if(e.userPriority.id == this.userPriority.id){
								this.userPriority = e.userPriority;
								this.firstShopDetail = e.info;
							}
						})
					}else{
						res.priorityAggrs.forEach(e=>{
							if(e.userPriority.useStatus == 'unused'){
								this.userPriority = e.userPriority;
								this.firstShopDetail = e.info;
							}
						})
						
						
						console.log(this.userPriority)
					}
				}

			},
			// 获取我的
			async getCollectionInfo(id) {
				let res = await this.$u.api.getCollectionInfo({}, id);
				this.collectionInfo = res;
			},
			fuzhi(data) {
				uni.setClipboardData({
					data: data,
					success: function(data) {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						})
					}
				})
			},
			zeng() {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '敬请期待'
				// })
				if (this.user.myInfo.user.isReal == 0) {
					uni.showToast({
						icon: 'none',
						title: '请先完成实名认证'
					})
					setTimeout(() => {
						this.$ma.route.realName();
					}, 1500)
					return;
				}
				let info = this.collectionInfo;
				this.$ma.route.transferFriend({
					info: JSON.stringify(info)
				})
			}
		},
		onLoad(e) {
			// console.log('user',this.user)
			this.spuId = e.spuId;
			if (e.spuId) this.getProductDetail(e.spuId);
			this.detailType = e.detailType;
			if (e.collectionId) this.getCollectionInfo(e.collectionId);
			if (e.firstShopDetail) {
				this.firstShopDetail = JSON.parse(e.firstShopDetail);
				this.userPriority = JSON.parse(e.userPriority);
				console.log(this.userPriority)
			}
		},
		filters: {
			timeFilterIn(value) {
				// let val = value.substring(0,value.length-3);
				let val = value.substring(5, 16)
				// val = val.substr(0,1)
				return val;
			}
		},
		computed: {
			time() {
				return item => {
					let createTime = Date.parse((item.collection.createTime).replace(/-/g, "/"));
					let givingCooling = item.spu.givingCooling * 24 * 3600 * 1000;
					let lastGivingCooling = createTime + givingCooling;
					let nowTime = Date.parse(new Date());

					let itemTime = lastGivingCooling - nowTime;
					return itemTime / 1000;
				}
			},
			firstShopTime() {
				return item => {
					let endTime = Date.parse((item.endTime).replace(/-/g, "/"));
					let nowTime = Date.parse(new Date());
					let time = endTime - nowTime;
					return time / 1000;
				}
			},
			timestamp() {
				return item => {
					if (item.status == 'ing') {
						const nowTime = Date.parse(new Date());
						const activeTime = Date.parse((item.endTime).replace(/-/g, "/"));
						const time = activeTime - nowTime;
						return time / 1000;
					} else if (item.status == 'waiting') {
						const nowTime = Date.parse(new Date());
						const activeTime = Date.parse((item.startTime).replace(/-/g, "/"));
						const time = activeTime - nowTime;
						return time / 1000;
					}
				}
			}
		},
		destroyed() {
			this.clearTimer();
			this.userPriority = {}
		}
	}
</script>

<style lang="scss">
	.collection-list {
		display: flex;
		flex-wrap: wrap;
		padding: 2.13vw 0vw 8.53vw 5.33vw;
		background-color: #1b1b1b;

		.collection-item {
			display: flex;
			flex-direction: column;
			margin-top: 4.27vw;
			margin-right: 2.4vw;

			.collection-border {
				position: relative;
				padding: 1.07vw;
				width: 28.27vw;
				height: 28.27vw;
				border-radius: 4.27vw;

				.collection-img {
					width: 26.13vw;
					height: 26.13vw;
					border-radius: 4.27vw;
				}

				.collection-num {
					position: absolute;
					bottom: 1.07vw;
					right: 1.04vw;
					z-index: 1;
					width: 12.8vw;
					line-height: 6.4vw;
					text-align: center;
					background-color: #000;
					border-radius: 4vw 0 0 0;
					font-size: 3.2vw;
				}
			}

			.jiu-font24-fff {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				width: 26.13vw;
				margin-top: 2.67vw;
			}
		}
	}

	.bird {
		animation: pulse 4s infinite;
		background-color: #1b1b1b;
		z-index: 99;
		position: relative;
	}

	@-webkit-keyframes pulse {
		0% {
			transfor: translateY(0);
		}

		50% {
			transform: translateY(3vw);
		}

		100% {
			transform: translateY(0);
		}
	}

	@keyframes pulse {
		0% {
			transfor: translateY(0);
		}

		50% {
			transform: translateY(3vw);
		}

		100% {
			transform: translateY(0);
		}
	}

	/deep/.wscnph {
		width: 100%;
		display: block;
	}

	.image427 {
		width: 4.27vw;
		height: 4.27vw;
	}

	.top853 {
		margin-top: 8.53vw;
	}

	.top267 {
		margin-top: 2.67vw;
	}

	.real-name {
		display: flex;
		justify-content: space-between;
		position: sticky;
		bottom: 2.13vw;
		left: 5.33vw;
		width: 89.33vw;
		padding: 3.2vw 4.27vw;
		border-radius: 5.33vw;
		background-color: #493622;
	}

	.center {
		display: flex;
		align-items: center;
	}

	.real-img {
		width: 4.27vw;
		height: 4.27vw;
		display: block;
	}

	.detailImg-box {
		position: relative;
		height: 112.53vw;
	}

	.radius-box {
		height: 6.4vw;
		width: 100vw;
		border-radius: 6vw 6vw 0 0;
		background-color: #1b1b1b;
		// position: absolute;
		bottom: 0;
		z-index: 5;
		display: flex;
		justify-content: center;
		align-items: flex-end;

		.enter-img {
			width: 4.27vw;
			height: 4.27vw;
			transform: rotate(90deg);
		}
	}

	.text-box {
		background-color: #1b1b1b;
		padding: 4.27vw 5.33vw;
		padding-right: 0;
		padding-bottom: 9.06vw;

		.num-box {
			display: inline-flex;
			align-items: center;
			background-color: #323232;
			border-radius: 1.07vw;

			.num {
				padding: 0vw 1.07vw 0 1.07vw;
				background: linear-gradient(270deg, #FFCE80 0%, #A972FF 100%);
				border-radius: 1.07vw;
				font-size: 3.47vw;
				font-weight: blod;
			}

			.num-text {
				font-size: 2.67vw;
				font-weight: 300;
				color: #FFCE80;
				padding: 0.27vw 1.07vw;
			}
		}

		.xianliang-box {
			height: 4.27vw;
			display: flex;

			.xianliang-img {
				width: 10.67vw;
				height: 4.27vw;
				display: block;
			}

			.xianliang-text {
				font-size: 2.67vw;
				font-weight: 300;
				color: #FFCE80;
				background-color: #323232;
				padding: 0.27vw 1.07vw;
				border-radius: 0 1.07vw 1.07vw 0;
			}
		}

		.text-title {
			margin-top: 2.13vw;
			font-size: 5.87vw;
			font-weight: 500;
			color: #FFFFFF;
			padding-right: 5.33vw;
			display: block;
		}

		.border-box {
			margin-top: 2.13vw;
			padding: 0.27vw 1.07vw;
			border: 1px solid #A972FF;
			border-radius: 1.07vw;
			font-size: 2.67vw;
			font-weight: 300;
			color: #A972FF;
			display: inline-flex;
			margin-right: 2.13vw;
		}

		.desc {
			display: block;
			margin-top: 6.4vw;
			font-size: 3.2vw;
			color: #555555;
			font-weight: 300;
			padding-right: 5.33vw;
		}

		.money-box {
			display: flex;
			justify-content: space-between;
			margin-top: 6.4vw;
			padding-right: 5.33vw;

			.price {
				font-size: 6.4vw;
				font-weight: 500;
				color: #A972FF;
			}

			.line-price {
				text-decoration: line-through;
				font-size: 3.73vw;
				color: #555555;
				font-weight: 300;
				margin-left: 2.13vw;
			}

			.right-money {
				display: flex;
				flex-direction: column;
			}
		}

		.creator-box {
			background-color: #000000;
			padding: 3.2vw 5.33vw;
			padding-left: 4.27vw;
			border-radius: 12.8vw 0 0 12.8vw;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 8.53vw;

			.creator-left {
				display: flex;
				align-items: center;

				.cerator-img {
					width: 10.67vw;
					height: 10.67vw;
					display: block;
					border-radius: 50%;
					margin-right: 2.13vw;
				}

				.creator-text {
					display: flex;
					flex-direction: column;
				}

				.creator-border {
					padding: 0vw 1.33vw;
					border-radius: 1.07vw;
					border: 1px solid #A972FF;
					color: #A972FF;
					font-size: 2.67vw;
					font-weight: 300;
					margin-left: 1.07vw;
				}
			}
		}
	}

	.bottomText-box {
		margin-bottom: 36.27vw;
		padding: 2.13vw 5.33vw 6.4vw 5.33vw;
		background-color: #1b1b1b;
		display: flex;
		flex-direction: column;

		.bottomText-title {
			color: #aaaaaa;
			font-size: 3.73vw;
			font-weight: 500;
			margin-top: 4.27vw;
			display: block;
		}

		.bottomText-text {
			color: #555555;
			font-size: 3.2vw;
			font-weight: 300;
			margin-top: 2.13vw;
		}
	}

	.bottomBox {
		justify-content: space-between !important;

		.buy-btn {
			width: 75.47vw;
			line-height: 12.8vw;
			text-align: center;
			background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
			box-shadow: 0vw 3vw 5vw rgba(71, 12, 114, 0.4800);
			border-radius: 6.4vw;
			font-size: 3.73vw;
			font-weight: 600;
			color: #000000;
		}

		.ready-btn {
			width: 75.47vw;
			padding: 1.6vw 0 1.33vw 0;
			// height: 12.8vw;
			// text-align: center;
			border-radius: 6.4vw;
			background-color: #555555;
			font-size: 3.73vw;
			font-weight: 300;
			color: #BBBBBB;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}

	.auth-box {
		margin-top: 0.27vw;
		padding: 6.4vw 5.33vw;
		background-color: #1b1b1b;
		display: flex;
		flex-direction: column;

		.auth-title {
			font-size: 3.73vw;
			font-weight: 500;
			color: #FFFFFF;
			margin-bottom: 4.27vw;
		}
	}

	.between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.deal-box {
		margin-top: 0.27vw;
		padding: 6.4vw 5.33vw;
		background-color: #1b1b1b;
		display: flex;
		flex-direction: column;

		.deal-title {
			font-size: 3.73vw;
			font-weight: 500;
			color: #FFFFFF;
			margin-bottom: 4.27vw;
		}

		.deal-info {
			display: flex;

			.deal-img {
				width: 10.67vw;
				height: 10.67vw;
				border-radius: 50%;
			}
		}

		.info {
			display: flex;
			flex-direction: column;
			margin-left: 2.13vw;
		}
	}

	.unplayed {
		background: #555555 !important;
		color: #000 !important;
		box-shadow: none !important;
	}
</style>
